<div id="connectionDetailsId" class="palm-hasheader">
   <div class="palm-page-header multi-line">
		<div class="palm-page-header-wrapper">
	        <div class="icon vpn"></div>
	        <div class="title">
	        	VPN
	        </div>
	    </div>
    </div>
    
    <div class="palm-group">
		<div class="palm-group-title">
			配置文件名称 
		</div>
		<div class="palm-list">  
			<div class='palm-row single'>
				<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
				    <div class="title">
    					<div id="vpnProfileName" x-mojo-element="TextField"></div>
    				</div>
				</div>
			</div>
		</div>
	</div>
	

	<div id="connectionDetails" style="display:none">
	  	<table class="palm-divider collapsible" x-mojo-tap-highlight="momentary" id="connectionDetailsDrawer">
	    	<tr>
	      		<td class="label">连接详细信息</td>
	      		<td class="line" width="100%"></td>
		  		<td><div class="palm-arrow-expanded arrow_button"></div></td>
	      		<td class="right"></td>
	    	</tr>
  	  	</table>
    	<div id="cnxnDetailsStart" class="collapsor"></div>
    </div>
        
	<div id="profileDetails" >
	  	<table class="palm-divider collapsible" x-mojo-tap-highlight="momentary" id="profilDetailsDrawer">
	    	<tr>
	      		<td class="label">配置详细信息</td>
	      		<td class="line" width="100%"></td>
		  		<td><div class="palm-arrow-expanded arrow_button"></div></td>
	      		<td class="right"></td>
	    	</tr>
  	  	</table>
    	<div id="dynamicProfileElementsStart" class="collapsor"></div>
    </div>

	<div class="palm-divider"></div>

    <div x-mojo-element="Button" id="buttonDeleteProfile"></div>

    <div x-mojo-element="Button" id="buttonConnectionCtrl"></div>
	
    <div x-mojo-element="Button" id="buttonCancel"></div>
</div>
